@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --appbar-height: 3.5rem;
  --navbar-height: 3.8rem;
  --content-min-width: 300px;
  --content-max-width: 576px;
  --sidebar-width: 250px;
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded font-semibold text-sm bg-slate-600 shadow-sm text-white;
  }

  .input-field {
    @apply w-full border-2 rounded border-slate-400;
  }

  .fieldset {
    @apply p-3 border-2 border-solid border-slate-300;
  }

  .btn-disabled {
    @apply bg-slate-300 cursor-not-allowed;
  }

  .navbar-bg-color {
    @apply bg-slate-600;
  }

  .navbar-border-color {
    @apply border-slate-300;
  }

  .err-text-color {
    @apply text-red-700;
  }

  .actionbar-icon {
    @apply w-8 h-8;
  }

  .profile-portrait {
    @apply object-cover rounded-md w-14 h-14;
  }

  .profile-portrait-lg {
    @apply object-cover rounded-md w-28 h-28;
  }

  .fieldset {
    @apply p-3 border-2 border-solid border-slate-300;
  }

  .sidebar-navlink {
    @apply cursor-pointer px-3 py-5 block transition duration-300 text-white border-b border-slate-500;
  }

  .link {
    @apply cursor-pointer text-blue-600 underline;
  }
}
